<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/goodsShow.css">
    <link rel="stylesheet" href="css/resets.css">
    <style>
        main {
            height: 1190px;
            background-color: #f2f2f2;
            padding-top: 25px;
        }

        .main .center {
            width: 1080px;

            margin: 0 auto;
            overflow: hidden;
            clear: both;
        }

        .page p {
            font-size: 14px;
            margin-bottom: 10px;
        }

        .help {
            height: 270px;
            width: 261px;
            padding-top: 1px;
            float: left;
            margin-left: 7px;
            margin-bottom: 5px;


        }

        .picBox {
            width: 271px;
            height: 257px;
            text-align: center;
            transition: all .4s;
            overflow: hidden;
            background-color: white;
        }

        .picBox:hover {
            margin-top: -2px;
            box-shadow: 0 0 6px rgb(175, 174, 174);
        }

        .picBox img {
            width: 195px;
            height: 195px;
        }

        .picBox span {
            font-size: 14px;
            color: #a92112;
            text-align: center;
        }

        .picBox b {
            font-size: 12px;
            color: #a92112;

        }

        footer {
            clear: both;
        }
    </style>
</head>

<body>
    <aside></aside>
    <header></header>
    <div class="search"></div>
    <main>
        <div class="center">
            <div class="page">
                <p></p>
                <div class="bigPicBox">
                </div>
            </div>
        </div>
    </main>
    <footer></footer>

</body>

</html>
<script src="js/cookieTools.js"></script>
<script src="js/jQuery.js"></script>
<script>
    $("header").load("header.html");
    $("footer").load("footer.html");
    $(".search").load("search.html");
    $("aside").load("aside.html");
    //==========获取点击目标得商品下标从而渲染网页
    // 如果通过window.location传过来得参数会有问号需要再删除操作
   
    $.getUrlParam = function (name) {//name是上个页面传进来的参数名 通过这个函数将参数值解析出来 调用一下即可
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
    console.log($.getUrlParam("name"));
    let index = $.getUrlParam("name")
    $.get("getGoodsList.php", `typeId=${index}`, function ($str) {
        let arr = JSON.parse($str);
        $(".page p").html(`为您找到${arr.length}条结果`);
        let arr1 = [];
        for (i = 0; i < arr.length; i++) {
            // 由于数据库内得id是乱序，要点击哪个目标传值至详情页面 并渲染出对应得信息必须获得它每个图对应得id值，即
            // index      01234567
            // goodsId    09584123   通过数组一一对应，就不会找不到数据库相应的信息了
            arr1.push(arr[i]. goodsId);
            
            let goodsImg = arr[i].goodsImg;
            let goodsName = arr[i].goodsName;
            let goodsPrice = arr[i].goodsPrice;
            let oDiv = $("<div class='help'></div>");
            $(".bigPicBox").append(oDiv);
            $(".help").eq(i).html(
                `<div class="picBox">
                                <img class="goodsImgs" src="imgs/${goodsImg}" alt="">
                                <p>${goodsName}</p>
                                <span><b>￥</b> ${goodsPrice}</span>
                            </div>`
            )
        }
        for (let i = 0; i < arr1.length; i++) {//此处必须放在函数内，因为创建插入在函数内，最后执行，否则会因为异步，导致获取不到元素
           
            $(".help").eq(i).click(function () {
                console.log(i)
                location.href = "goodsinfo.html?goodsId=" + i;
            });
        }

        
        //     $(".goodsimgs").click(function () {
        //         console.log("111")
        //     location.href = "goodsinfo.html?goodsId=" + $(this).index();
        // });
        console.log($(".goodsImgs"));
        
    });
    //获取具体某个商品得下标传给详情页


</script>